<!--品牌定位-->
<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {globalBrandData, newMediaData, designBrandData} from "./service-case-mock.ts"

const route = useRoute()

const state = ref({
  data: globalBrandData[0]
})
onMounted(() => {
  const type = route.params.type;
  const index = parseInt(route.params.index ?? 0);
  let data = globalBrandData;
  if (type === "01") {
    data = globalBrandData;
  } else if (type === "02") {
    data = designBrandData;
  } else if (type === "03") {
    data = newMediaData;
  }
  state.value.data = data[index];
})
</script>

<template>
  <view class="seg1 container" :style="{
    backgroundImage: `url('${state.data.background}')`
  }">
    <view class="font80 bottomIn d2s">{{ state.data.title }}</view>
    <view class="font48 bottomIn d2s">{{ state.data.english }}</view>
  </view>
  <view class="seg2 container row">
    <view class="column half">
      <view class="inter font54">Introduction Services</view>
      <view class="font70">服务介绍</view>
    </view>
    <view class="column half">
      <span class="font24 top4">{{ state.data.intro.intro }}<br><br>{{ state.data.intro.subIntro }}</span>
<!--      <view class="line"></view>-->
<!--      <view class="font18">{{ state.data.intro.intro }}</view>-->
<!--      <view class="font18 top4">{{ state.data.intro.subIntro }}</view>-->
    </view>
  </view>
  <view class="seg3 container">
    <view class="inter font54">Service Features</view>
    <view class="font70">服务特色</view>
    <view class="row top10">
      <view class="column item font32" v-for="(item, i) in state.data.features" :key="i"
            :style="{backgroundColor: i===1? '#383D3E': ''}">
        <img :src="`../images/icon_features/${item.icon}.png`" alt=""/>
        <view class="top6" style="text-align: center;">{{ item.desc }}</view>
        <view class="top4">{{ item.title }}</view>
      </view>
    </view>
  </view>
  <view class="seg4 container">
    <view class="inter font54">Service Process</view>
    <view class="font70">服务流程</view>
    <view class="column process">
      <view class="column item">
        <img src="../../assets/icons/icon_start.png" alt=""/>
      </view>
      <view class="column" style="width: 100%;" v-for="(item, i) in state.data.process" :key="i">
        <view class="row nodeItem">
          <view class="column left" :style="{opacity: i % 2 === 1 ? '0' : '1'}">
            <img class="number" :src="`../images/numbers/icon_${i+1}.png`" alt=""/>
            <view class="column card">
              <view class="font32">{{ item.title }}</view>
              <view class="font22 top2">{{ item.desc }}</view>
            </view>
          </view>
          <view class="column node">
            <view class="line"></view>
            <img src="../../assets/icons/icon_node.png" alt=""/>
          </view>
          <view class="column right" :style="{opacity: i % 2 === 1 ? '1' : '0'}">
            <img class="number" :src="`../images/numbers/icon_${i+1}.png`" alt=""/>
            <view class="column card">
              <view class="font32">{{ item.title }}</view>
              <view class="font22 top2">{{ item.desc }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="column item">
        <img src="../../assets/icons/icon_end.png" alt=""/>
      </view>
    </view>
  </view>
</template>

<style scoped>
.seg1.container {
  padding-top: 20%;
  height: calc(100vw * 1024 / 1920);
}

.seg2.container {
  padding-top: 10%;
  height: calc(100vw * 717 / 1920);

  .line {
    width: 6%;
    height: 2px;
    margin: 4% 0;
    background-color: #979797;
  }
}

.seg3.container {
  height: calc(100vw * 1084 / 1920);

  .item {
    cursor: pointer;
    width: 33.33%;
    height: calc(100vw * 533 / 1920);
    background-color: #191919;
    align-items: center;
    justify-content: center;

    img {
      width: 45%;
    }
  }
}

.seg4.container {
  .process {
    margin-top: 10%;
    width: 100%;
    align-items: center;

    .item {
      align-items: center;

      img {
        width: 40%;
      }
    }

    .nodeItem {
      width: 100%;

      .left {
        width: 48%;
        align-items: flex-end;

        .number {
          width: 8%;
          z-index: 1;
          margin-right: 10%;
        }

        .card {
          width: 100%;
          padding: 6% 10%;
          margin-top: -2%;
          align-items: flex-end;
          background-color: #191919;
        }
      }

      .node {
        flex: 1;
        align-items: center;

        .line {
          width: 1px;
          height: 100%;
          background-color: #191919;
        }

        img {
          width: 6px;
          height: 6px;
          margin-top: -200%;
        }
      }

      .right {
        width: 48%;

        .number {
          width: 8%;
          z-index: 1;
          margin-left: 10%;
        }

        .card {
          width: 100%;
          padding: 6% 10%;
          margin-top: -2%;
          background-color: #191919;
        }
      }
    }
  }
}
</style>